// 类组件，首字符大写！！！
import React, {Component} from 'react'
class ComA extends React.Component{
  constructor() {
    super();
    // 初始化状态机
    this.state = {
      job: '前端开发工程师',
      income: 10000
    }
    // 统一修改this指向，在调用函数时就不需要bindthis了
    // this.beMoreRich = this.beMoreRich.bind(this);
  }
  beRich(num, e) {
    // 修改状态机中的数据，需要调用setState方法
    // setState方法是异步的，如果需要获取的最新的值，就在回调函数中访问
    console.log(num);
    console.log(e);
    // return
    this.setState({
      income: this.state.income + 1000
    },()=>{
      console.log('新的：',this.state.income);
    })
    console.log('老的：',this.state.income);
  }
  beMoreRich(num, e) {
    console.log(num);
    console.log(e);
    this.setState({
      income: this.state.income + 2000
    });
  }
  render() {
    let el = <h1 className="coma">这是我的第一个类组件,666</h1>
    // 返回给父组件使用
    return (<div>
      <h1 className="coma">这是我的第一个类组件,666</h1>
      <p>我是{this.state.job}，我月薪{this.state.income}元</p>
      {/* 事件监听,箭头函数，有this,显式传递事件对象 */}
      <button onClick={(e)=>this.beRich('666', e)}>1涨薪！！！</button>
      {/* 传统写法，没有this，需要绑定this */}
      <button onClick={this.beRich.bind(this)}>2涨薪！！！</button>
      {/* 传统写法，没有this，在构造函数中绑定this,隐式传递事件对象 */}
      <button onClick={this.beMoreRich.bind(this, 777)}>3涨薪！！！</button>
    </div>)
  }
}
export default ComA
